
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:s="http://java.sun.com/jsf/composite/components">
<ui:composition template="/templates/masterLayout.xhtml">
	<ui:define name="content">
		<script>
			function hideSoLuongConLai(isHide) {
				$(".conLaiClass").css("display", isHide ? "none" : "");
			}
		</script>
		<p:layout id="banHangLayoutId" style="height: 500px">
			<p:layoutUnit position="west" resizable="false" size="30%" minSize="100" styleClass="noborder">
				<input type="checkbox" onchange="hideSoLuongConLai($(this).is(':checked'))"> Ẩn số lượng còn lại</input>
				<h:form id="sanPhamFormId">
					<p:tabView id="sanPhamTabViewId" value="#{banHang.loaiSanPhams}" var="loaiSanPhamDTO" styleClass="noborder">
						<p:tab title="#{loaiSanPhamDTO.loaiSanPham.name}">
							<p:dataGrid var="dm" value="#{loaiSanPhamDTO.dinhMucs}" columns="3">
								<p:outputLabel id="dmConLaiId" styleClass="conLaiClass" value="#{dm.conLai}" />
								<br />
								<p:commandButton style="width:70px;height:70px" value="#{dm.sanPham.name}" action="#{banHang.addSanPham(dm)}"
									update=":chiTietTableFormId:chiTietTableId :tongCongFormPanelId:tongCongId :tongCongFormPanelId:tienGiamGiaId :tongCongFormPanelId:thanhToanId dmConLaiId">
								</p:commandButton>
							</p:dataGrid>
						</p:tab>
					</p:tabView>
				</h:form>
			</p:layoutUnit>

			<p:layoutUnit position="center" styleClass="noborder">
				<p:growl autoUpdate="true" sticky="true" />
				<h:form id="chiTietTableFormId">
					<p:dataTable id="chiTietTableId" editable="true" editMode="cell" value="#{banHang.donHang.chiTietDonHangs}"
						var="chiTietDonHang" scrollable="true" scrollHeight="150" rowKey="#{chiTietDonHang.id}" selectionMode="single"
						selection="#{banHang.selectedCtDonHang}">

						<f:facet name="header">Đơn hàng bàn #{danhSachBanKhuVuc.selectedBansLabel}</f:facet>
						<p:ajax event="rowSelect" listener="#{banHang.onRowSelected}" immediate="true" />
						<p:ajax event="cellEdit" listener="#{banHang.soLuongEdit}"
							update=":sanPhamFormId :tongCongFormPanelId:tongCongId :tongCongFormPanelId:tienGiamGiaId :tongCongFormPanelId:thanhToanId" />
						<p:column style="width:150px" headerText="Tên">
							<h:outputText value="#{chiTietDonHang.sanPham.name}" />
						</p:column>

						<p:column style="width:100px" headerText="Số lượng">
							<p:cellEditor id="soLuongId">
								<f:facet name="output">
									<h:outputText value="#{chiTietDonHang.soLuong}" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="soLuongInputId" value="#{chiTietDonHang.soLuong}" style="width:96%">
										<pe:keyFilter for="soLuongInputId" mask="pint" />
									</p:inputText>
								</f:facet>
							</p:cellEditor>
						</p:column>

						<p:column style="width:100px" headerText="Đơn giá">
							<h:outputText id="donGiaId" value="#{chiTietDonHang.donGia}" />
						</p:column>

						<p:column style="width:100px" headerText="Thành tiền">
							<h:outputText id="thanhTienId" value="#{chiTietDonHang.soLuong * chiTietDonHang.donGia}" />
						</p:column>

						<f:facet name="footer">
						Footer
						</f:facet>
					</p:dataTable>

					<pe:remoteCommand name="onClickKeypad" process="@form"
						update=":sanPhamFormId :tongCongFormPanelId:tongCongId :tongCongFormPanelId:tienGiamGiaId :tongCongFormPanelId:thanhToanId"
						actionListener="#{banHang.onClickKeypad}">
						<pe:methodSignature parameters="java.lang.String" />
						<pe:methodParam name="keyValue" />
					</pe:remoteCommand>
				</h:form>
				<h:form id="tongCongFormPanelId">
					<p:panelGrid id="tongCongPanelId" style="float:right; text-align:right;">
						<p:row>
							<p:column>
								<p:outputLabel value="Tổng cộng: " />
							</p:column>
							<p:column colspan="2">
								<p:outputLabel id="tongCongId" value="#{banHang.donHang.tongGiaSanPham}" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<p:outputLabel value="Phí dịch vụ: " />
							</p:column>
							<p:column colspan="2">
								<p:inputText value="#{banHang.donHang.phiDichVu}">
									<p:ajax event="change" update="tienGiamGiaId thanhToanId" process="@this" />
								</p:inputText>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<p:outputLabel value="Giảm giá: " />
							</p:column>
							<p:column>
								<p:spinner id="giamGiaId" value="#{banHang.donHang.giamGia}" min="0" max="100" size="2">
									<p:ajax update="tienGiamGiaId thanhToanId" process="@this" />
								</p:spinner>
							</p:column>
							<p:column>
								<p:inputText id="tienGiamGiaId" value="#{banHang.donHang.tongGiaSanPham*banHang.donHang.giamGia/100}"
									readonly="true" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<p:outputLabel value="Thanh toán: " />
							</p:column>
							<p:column colspan="2">
								<p:outputLabel id="thanhToanId" value="#{banHang.donHang.tongGiaThanhToan}" />
							</p:column>
						</p:row>
						<p:row>
							<p:column colspan="4" style="text-align:center;">
								<p:commandButton value="Thanh toán" update=":thanhToanFormId" onclick="thanhToanDialog.show()" />
								<p:commandButton value="Trở về danh sách bàn" action="#{banHang.troVeDanhSachBan}" immediate="true" />
							</p:column>
						</p:row>
					</p:panelGrid>
					<h:panelGrid id="keyPadId" rendered="#{banHang.selectedCtDonHang != null}" style="float:right;">
						<s:keypad />
					</h:panelGrid>
					<p:remoteCommand name="dialogCallback"/>
				</h:form>
			</p:layoutUnit>
			<ui:include src="dialogThanhToan.xhtml"></ui:include>

		</p:layout>
	</ui:define>
</ui:composition>
</html>